﻿<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>mii wario 瓦里奥</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="/stylesheets/style.css" />
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
	<link type="text/css" rel="stylesheet" href="/stylesheets/slider_bigtable.css" />

	<script src="/scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="/scripts/jquery.ui.all.min.1.6rc2.js" type="text/javascript"></script>
	<script src="/scripts/haccordion-0.1.js" type="text/javascript"></script>

	<script type="text/javascript">
$(document).ready(function(){
  //loadmap();
  $(".bigtable_dragble").draggable();
  $("#bigtable_haccordion").haccordion(); 
  
  $("#big_test1_b1").click(function(){
	$.post('bigtable', {'nouse':'nouse'}, function(data){
		$("#big_test1_content").html(data).hide().fadeIn();
	});
	return false;
  });
  $("#big_test1_load").hide().ajaxStart(function(){
	$(this).fadeIn();
  }).ajaxStop(function(){
	$(this).fadeOut();
  });
  
  $("#bigtable_haccordion .header").click(function(){
	$("#big_ha_faces").hide();
  });
  
  ///*
  var container = $("#big_ha_container .content");
  var ul = $('ul', container);
  $("#slider1", container).slider({
	handle: '.ui-slider-handle',
	stop: function (event, ui) {
		ul.animate({'left' : ui.value * -1}, 500);
	},
	slide: function (event, ui) {
		ul.css('left', ui.value * -1);
	}
  });
  //*/
  //$("#slider1").slider();
  $("#slider2").slider();
  $("#slider3").slider();
  $("#slider4").slider();
  
  $("#big_test1_b2").click(function(){
	$("#big_ha_faces").show();
	return false;
  });
  
});
    </script>
  </head>
  <body>
<div id="big_ha_container">
	<div id="big_ha_faces">
		
	</div>
	<div id="bigtable_haccordion"> 
	<div class="header">face</div> 
	<div class="content">
	  <ul>
    {% for greeting in greetings %}
	  {% if greeting.key %}
	  <li><img class="bigtable_dragble" src='img?img_id={{ greeting.key }}'></img></li>
	  {% endif %}
    {% endfor %}
	  </ul>
	  <div id="slider1">
	    <div class="ui-slider-handle"></div>
	  </div>
	</div> 
	<div class="header">eyes</div> 
	<div class="content"><div id="slider2"><div class="ui-slider-handle"></div></div></div> 
	<div class="header">nose</div> 
	<div class="content"><div id="slider3"><div class="ui-slider-handle"></div></div></div> 
	<div class="header">mouse</div> 
	<div class="content"><div id="slider4"><div class="ui-slider-handle"></div></div></div> 
	</div> 
</div>
<h1>Make a face</h1>

<div id="big_test1">
<div id="big_test1_content"></div>
<div id="big_test1_b1"></div>
<div id="big_test1_b2"></div>
<div id="big_test1_load">loading</div>
</div>

<div>
          <form action="/sign" enctype="multipart/form-data" method="post">
            <div><label>png图片上传</label></div>
            <div><input type="file" name="img1"/></div>
            <div><input type="file" name="img2"/></div>
            <div><input type="file" name="img3"/></div>
            <div><input type="file" name="img4"/></div>
            <div><input type="file" name="img5"/></div>
            <div><input type="submit" value="上传"></div>
          </form>
</div>
<a href="{{ url }}">{{ url_linktext }}</a>
<div>
<table id="tabs2">
    <tr>
    <td>account</td>
	<td>png file</td>
	<td>删除</td>
    </tr>
    {% for greeting in greetings %}
      <tr>
      <td>
      {% if greeting.author %}
        {{ greeting.author.nickname }}
      {% else %}
       anonymous
      {% endif %}
      </td>
	  {% if greeting.key %}
	  <td><img class="bigtable_dragble" src='img?img_id={{ greeting.key }}'></img></td>
	  {% endif %}
	  <td><input type="submit" value="删除"></td>
      </tr>
    {% endfor %}
</table>
</div>
</div>
  </body>
</html>